<template>
	<view class="container">
		<!-- 轮播图 -->
		<swiper class="banner-swiper" indicator-dots autoplay interval="3000" duration="500">
			<swiper-item v-for="(item, index) in LBT_list" :key="index">
				<image :src="item.ImageUrl" class="banner-img"></image>
			</swiper-item>
		</swiper>

		<!-- 成功案例 -->
		<view class="case-section">
			<text class="section-title">唐云科技已帮上千家外贸公司、工厂升级转型</text>
			<text class="section-subtitle">热门成功案例</text>
			<view class="case-list">
				<view class="case-item" v-for="(caseItem, index) in caseList" :key="index" @click="goto_info(caseItem)">
					<image :src="caseItem.ImageUrl" class="case-img"></image>
					<text class="case-title">{{ caseItem.SystemSoftwareName }}</text>
					<text class="case-price">¥{{ caseItem.Price }}</text>
					<view class="case-stats">
						<text>正试用 {{ caseItem.InUseNum }}</text>
						<text>已售 {{ caseItem.SoldNum }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部菜单 -->
		<view class="bottom-nav">
			<view class="nav-item" @click="goHome">
				<i class="iconfont nav-icon" style="color: #01AEFD;">&#xe614;</i>
				<text>首页</text>
			</view>
			<view class="nav-item" @click="showShareModal = true">
				<i class="iconfont nav-icon" style="color: #02D768;">&#xe66c;</i>
				<text>分享</text>
			</view>
			<view class="nav-item" @click="goShare">
				<i class="iconfont nav-icon" style="color: #FD2624;">&#xe60e;</i>
				<text>抢优惠</text>
			</view>
			<view class="nav-item" @click="goMy">
				<i class="iconfont nav-icon" style="color: #000;">&#xe608;</i>
				<text>我的</text>
			</view>
		</view>
		<!-- 分享弹层 -->
		<view class="share-modal-mask" v-if="showShareModal" @click="showShareModal = false"></view>
		<view class="share-modal" :class="{ 'share-modal-show': showShareModal }">
			<view class="share-title">分享到</view>
			<view class="share-options">
				<!-- 分享给好友按钮 -->
				<button class="share-btn friend-btn" open-type="share" @click="setShareData('friend')">
						<i class="iconfont share-icon"
							style="color: #02D768;">&#xe609;</i><br />
					分享给好友
				</button>

				<!-- 分享到朋友圈按钮 -->
				<button class="share-btn timeline-btn" @click="shareToTimeline">
					<i class="iconfont share-icon" style="color: #02D768;">&#xe669;</i><br />
					分享到朋友圈
				</button>
			</view>
			<!-- <view class="share-cancel" @click="showShareModal = false">取消</view> -->
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 轮播图数据
				LBT_list: [],
				// 成功案例数据
				caseList: [],
				// 分享弹层显示状态
				showShareModal: false,
				shareType: 'friend', // 分享类型：friend/timeline
				shareData: {
					title: '唐云科技',
					path: '/pages/index/index', // 分享路径
					imageUrl: 'https://tangyun.tangyuntech.com/Images/UploadImages/915f98fd49a149238bac4595a4e87582.png' // 分享图片
				}
			};
		},
		mounted() {
			this.getLBT()
			this.getList()
		},
		methods: {
			getLBT() {
				uni.request({
					url: 'https://tangyun.tangyuntech.com/HomePageApi/GetHomePageImagesList', // 后端接口地址，需替换为实际地址
					method: 'POST',
					data: {

					},
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('调用成功:', res);
							this.LBT_list = res.data.data
						} else {
							console.error('调用失败', res.data);
						}
					},
					fail: (err) => {
						console.error('请求后端接口失败', err);
					}
				});
			},
			getList() {
				uni.request({
					url: 'https://tangyun.tangyuntech.com/HomePageApi/GetSystemSoftwareList', // 后端接口地址，需替换为实际地址
					method: 'POST',
					data: {
						openId: wx.getStorageSync('openid'),
					},
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('调用成功:', res);
							this.caseList = res.data.data
						} else {
							console.error('调用失败', res.data);
						}
					},
					fail: (err) => {
						console.error('请求后端接口失败', err);
					}
				});
			},
			goto_info(info) {
				var qr = JSON.stringify(info)
				uni.navigateTo({
					url: '/pages/productDetail/productDetail?qr=' + qr
				});
			},
			goShare() {
				uni.reLaunch({
					url: '/pages/home/couponList'
				})
			},
			goHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			goMy() {
				uni.reLaunch({
					url: '/pages/home/my'
				})
			},
			// 设置分享数据
			setShareData(type) {
				this.shareType = type;
				// 可以根据类型动态修改分享内容
				if (type === 'friend') {
					this.shareData.title = '快来看看这个内容！';
				} else {
					this.shareData.title = '推荐一个好东西给大家';
				}
			},

			// 触发朋友圈分享
			shareToTimeline() {
				// 先设置分享类型
				this.setShareData('timeline');

				// 检查是否支持朋友圈分享
				if (wx.canIUse('onShareTimeline')) {
					// 显示分享菜单，指定支持的分享类型
					wx.showShareMenu({
						withShareTicket: true,
						menus: ['shareTimeline'] // 只显示朋友圈分享
					});

					// 主动触发分享行为
					wx.updateShareMenu({
						showShareItems: ['shareTimeline'],
						success: () => {
							console.log('已准备好朋友圈分享');
						}
					});
				} else {
					uni.showToast({
						title: '当前微信版本不支持朋友圈分享',
						icon: 'none'
					});
				}
			}
		},
		// 分享给好友的生命周期函数
		onShareAppMessage() {
			// 根据shareType返回不同的分享内容
			return {
				title: this.shareType === 'friend' ? '唐云科技已帮上千家外贸公司、工厂升级转型' : this.shareData.title,
				path: this.shareData.path,
				imageUrl: this.shareData.imageUrl,
				success: () => {
					uni.showToast({
						title: '分享好友成功',
						icon: 'success'
					});
					this.showShareModal = false
				},
				fail: (err) => {
					console.error('分享好友失败', err);
				}
			};
		},

		// 分享到朋友圈的生命周期函数
		onShareTimeline() {
			return {
				title: this.shareType === 'timeline' ? '朋友圈专属分享标题' : this.shareData.title,
				path: this.shareData.path,
				imageUrl: this.shareData.imageUrl,
				success: () => {
					uni.showToast({
						title: '分享朋友圈成功',
						icon: 'success'
					});
				},
				fail: (err) => {
					console.error('分享朋友圈失败', err);
				}
			};
		},
	};
</script>
<style scoped>
	.container {
		padding: 16px;
		background-color: #fff;
	}

	/* 轮播图 */
	.banner-swiper {
		width: 100%;
		height: 180px;
		border-radius: 8px;
		overflow: hidden;
	}

	.banner-img {
		width: 100%;
		height: 100%;
	}

	/* 标题与描述 */
	.title-box {
		margin-top: 24px;
	}

	.title {
		font-size: 28px;
		font-weight: bold;
		color: #000;
	}

	.sub-title {
		font-size: 16px;
		color: #666;
		margin-top: 8px;
	}

	.desc {
		font-size: 14px;
		color: #999;
		margin-top: 8px;
		line-height: 1.6;
	}

	/* 标签按钮 */
	.tag-group {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 24px;
	}

	.tag-btn {
		padding: 8px 16px;
		font-size: 14px;
		color: #fff;
		background-color: #007aff;
		border: none;
		border-radius: 4px;
	}

	/* 成功案例 */
	.case-section {
		margin-top: 24px;
		margin-bottom: 50px;
	}

	.section-title {
		display: block;
		font-size: 14px;
		font-weight: bold;
		color: #000;
		text-align: center;
	}

	.section-subtitle {
		display: block;
		text-align: center;
		font-size: 10px;
		color: #999;
		margin-top: 4px;
	}

	.case-list {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		margin-top: 16px;
	}

	.case-item {
		width: calc(42% - 8px);
		padding: 12px;
		border: 1px solid #eee;
		border-radius: 8px;
		text-align: center;
	}

	.case-img {
		width: 100%;
		height: 90px;
		border-radius: 4px;
	}

	.case-title {
		font-size: 14px;
		font-weight: bold;
		margin-top: 8px;
	}

	.case-price {
		font-size: 14px;
		color: #f00;
		margin-top: 4px;
		display: block;
	}

	.case-stats {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #999;
		margin-top: 4px;
	}

	.bottom-nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 50px;
		border-top: 1px solid #ccc;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-icon {
		width: 20px;
		height: 20px;
	}

	.trial-btn {
		background-color: #ff0000;
		color: #fff;
		padding: 10px 20px;
		border-radius: 5px;
	}

	/* 分享弹层样式 */
	.share-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 100;
	}

	.share-modal {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 30vh;
		/* 高度为屏幕的30% */
		background-color: #fff;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		transform: translateY(100%);
		transition: transform 0.3s ease;
		z-index: 101;
	}

	.share-modal-show {
		transform: translateY(0);
	}

	.share-title {
		text-align: center;
		padding: 16px;
		font-size: 16px;
		color: #333;
		border-bottom: 1px solid #eee;
	}

	.share-options {
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(30vh - 90px);
		gap: 40px;
	}

	.share-option {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.share-icon {
		width: 60px;
		height: 60px;
		font-size: 60px;
		margin-bottom: 8px;
	}

	.share-text {
		font-size: 18px;
		color: #333;
	}

	.share-btn {
		border: none;
		/* 去除点击时的默认边框 */
		outline: none;
		/* 去除默认背景（可选，根据需求） */
		background-color: transparent;
	}

	.share-cancel {
		text-align: center;
	}
</style>